<template>
    <div>
        <page-main>
            <!-- 筛选栏 -->
            <search-bar>
                <el-form :model="search" size="small" label-width="100px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="时间范围">
                                <el-date-picker
                                    v-model="search.date"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    @change="handleDateChange"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="人员部门">
                                <el-cascader
                                    :props="props"
                                    :show-all-levels="false"
                                    :options="departMember"
                                    style="width: 100%;"
                                    @change="handleMemberChange"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-button type="primary" @click="getList">查询</el-button>
                                <el-button @click="handleReset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </search-bar>
        </page-main>
        <page-main>
            <!-- 表格 table -->
            <el-table ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                <el-table-column prop="name" fixed label="姓名" />

                <el-table-column prop="users_count" sortable label="新增线索数">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="detail(scope.row, '新增线索数', 0)">{{ scope.row.users_count }}</el-button>
                    </template>
                </el-table-column>

                <el-table-column prop="phone_count" sortable label="新增有效沟通数">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="detail(scope.row, '新增有效沟通数', 1)">{{ scope.row.phone_count }}</el-button>
                    </template>
                </el-table-column>

                <el-table-column prop="genjin_count" sortable label="新增跟进数">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="detail(scope.row, '新增跟进数', 2)">{{ scope.row.genjin_count }}</el-button>
                    </template>
                </el-table-column>

                <el-table-column prop="kehu_count" sortable label="新增客户数">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="detail(scope.row, '新增客户数', 3)">{{ scope.row.kehu_count }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="genjin_kehu_count" sortable label="新增跟进客户数">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="detail(scope.row, '新增跟进客户数', 4)">{{ scope.row.genjin_kehu_count }}</el-button>
                    </template>
                </el-table-column>

                <el-table-column prop="yuyue_count" sortable label="新增预约数">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="detail(scope.row, '新增预约数', 5)">{{ scope.row.yuyue_count }}</el-button>
                    </template>
                </el-table-column>

                <el-table-column prop="shangmen_count" sortable label="新增上门数">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="detail(scope.row, '新增上门数', 6)">{{ scope.row.shangmen_count }}</el-button>
                    </template>
                </el-table-column>

                <el-table-column prop="business_count" sortable label="新增签约数">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="detail(scope.row, '新增签约数', 7)">{{ scope.row.business_count }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="price_count" label="签约金额(万元)" />
                <el-table-column prop="order_count" label="新增回款数" />
                <el-table-column prop="shou_price_count" label="新增回款金额" />
            </el-table>
        </page-main>
        <!-- 数据详情 -->
        <detail-drawer ref="detailDrawer" />
    </div>
</template>

<script>
import { xiaoshou } from '@/api/analysis'
import { departMember } from '@/api/system'
import DetailDrawer from './components/DetailDrawer'
export default {
    name: 'List',
    components: {
        DetailDrawer
    },
    filters: {
        typeFilter(val) {
            const map = {
                1: '体验',
                2: '新购',
                3: '增购',
                4: '复购'
            }
            return map[val]
        },
        statusFilter(val) {
            const map = {
                1: '进行中',
                2: '已完成'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: false,
            search: {
                type: '1',
                date: [],
                start: '',
                end: '',
                memberIds: ''
            },
            props: { multiple: true, value: 'id', label: 'name', children: 'child' },
            departMember: [],
            dataList: []
        }
    },
    mounted() {
        this.getOptions();
        this.getList();
    },
    methods: {
        // 切换分页size
        handleSizeChange(val) {
            this.search.limit = val;
            this.getList();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.search.pages = val;
            this.getList();
        },
        // 重置筛选条件
        handleReset() {
            this.search.start = '';
            this.search.end = '';
            this.search.memberIds = '';
            this.search.pages = 1;
            this.getList();
        },
        // 获取列表
        getList() {
            this.loading = true;
            xiaoshou(this.search).then(res => {
                if (res.status == 1) {
                    this.dataList = res.data.list || [];
                }
                this.loading = false;
            })
        },
        // 数据明细
        detail(row, typeName, infotype) {
            const query = {
                name: 'xiaoshouAssets',
                type: this.search.type,
                start: this.search.start,
                end: this.search.end,
                id: row.member_id,
                typeName,
                infotype,
                header: row.name
            }
            this.$refs.detailDrawer.showDrawer(query)
        },
        // 获取 options
        getOptions() {
            departMember().then(res => {
                this.departMember = res.data.list || []
            })
        },
        handleDateChange(e) {
            this.search.start = e ? e[0] : ''
            this.search.end = e ? e[1] : ''
        },
        handleMemberChange(e) {
            if (e.length) {
                let arr = [];
                e.forEach(item => {
                    arr.push(item[item.length - 1])
                })
                this.search.memberIds = arr.join(',')
            } else {
                this.search.memberIds = []
            }
        }
    }
}
</script>
